<template>
  <div class="userCenterBody">
    <div class="userCenter">
      <div class="headerCard">
        <el-card style="width: 100%;" shadow="hover" class="card1">
          <template #header>
            <div class="card-header1">

              <div class="userInfo">
                <div class="title" style="width: 100%;height: 100%;  margin-right: 30px;">
                  <el-avatar :size="100" :src="userInfo.avatarUrl"/>
                </div>

                <div class="detail">
                  <div class="title" style="display: flex;width: 100%;height: 35px">
                    <div class="userName">{{ userInfo.username }}</div>
                    <div class="isVIP">
                      <img src="">
                    </div>
                  </div>

                  <div class="description">
                    <div>暂无个人简介</div>
                    <div style="height: 18px"></div>
                    <div class="userBaseInfo">
                      <el-row :gutter="20">
                        <el-col :span="6">
                          <div class="grid-content ep-bg-purple"/>
                          <el-row>
                            <el-col :span="7">
                              <div class="grid-content ep-bg-purple"/>
                              <el-icon v-if="userInfo.gender===1">
                                <Male/>
                              </el-icon>
                              <el-icon v-else-if="userInfo.gender===0">
                                <Female/>
                              </el-icon>

                            </el-col>
                            <el-col :span="12">
                              <div class="grid-content ep-bg-purple-light"/>
                              {{ userInfo.gender === 1 ? '男' : '女' }}
                            </el-col>
                          </el-row>

                        </el-col>
                        <el-col :span="6">
                          <div class="grid-content ep-bg-purple"/>
                        </el-col>
                        <el-col :span="6">
                          <div class="grid-content ep-bg-purple"/>
                          <el-row style="width: 200px">
                            <el-col :span="4">
                              <div class="grid-content ep-bg-purple"/>
                              <el-icon>
                                <Message/>
                              </el-icon>
                            </el-col>
                            <el-col :span="8" style="margin-right: 50px">
                              <div class="grid-content ep-bg-purple-light"/>
                              邮箱:{{ userInfo.email }}
                            </el-col>
                          </el-row>
                        </el-col>

                      </el-row>
                    </div>

                  </div>
                </div>
              </div>


              <div class="editInfo">
                <el-button type="primary" size="large" style="width: 150px" @click="editUserInfo()">编辑信息</el-button>
              </div>


            </div>
          </template>
        </el-card>
      </div>
    </div>
  </div>

</template>

<script setup>

import {useUserStore} from "@/stores/userStore.js";
import {ref} from "vue";
import router from "@/router/index.js";
import {Female, Male, Message} from "@element-plus/icons-vue";

const userStore = useUserStore()

const userInfo = ref(userStore.userInfo)

const {username, avatar, gender, phone, email} = userInfo


function editUserInfo(username, avatar, gender, phone, email) {
  router.push({
    path: '/editInfo',
    query: {
      username,
      avatar,
      gender,
      phone,
      email
    }
  })
}


</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.userCenterBody {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #50a8fe, #f0f2f5); /* 渐变从上到下 */
  margin-bottom: 50px;
  padding-bottom: 50px;
}

.userCenter {
  width: 75%;
  padding-top: 20px;
  margin-left: 200px;
}


.content {
  display: flex;
  justify-content: space-between;
}

.rightContent {
  width: 300px;

}

.card-header {
  display: flex;
}

.share {
  width: 30px;
}

.userInfo {
  width: 108px;
  height: 108px;
  display: flex;
  margin-right: auto;
}


.userBaseInfo {
  min-width: 500px;
}

.editInfo {
  text-align: right;
  margin-right: 30px;
}

</style>